<template>
  <div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
    <h1 style="color: #32ccee; font-size: 16px; text-align: center; margin: 20px 0;">茶饮对身体的影响</h1>
    <div style="display: flex; width: 100%; height: calc(100% - 60px);">
      <!-- 左侧 75% 区域显示图片 -->
      <div style="width: 75%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; padding: 20px; box-sizing: border-box;">
        <transition name="fade" mode="out-in">
          <img v-if="activeImage === 1" src="../assets/body/1.png" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute;">
          <img v-else-if="activeImage === 2" src="../assets/body/2.png" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute;">
          <img v-else-if="activeImage === 3" src="../assets/body/3.png" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute;">
          <img v-else-if="activeImage === 4" src="../assets/body/4.png" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute;">
          <img v-else-if="activeImage === 5" src="../assets/body/5.png" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute;">
          <img v-else-if="activeImage === 6" src="../assets/body/6.png" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute;">
        </transition>
      </div>
      <!-- 右侧 25% 区域放置按钮 -->
      <div style="width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 20px; box-sizing: border-box;">
        <div class="legend-item" :class="{ 'active': activeImage === 1 }" @click="changeImage(1)">
          <div class="legend-color" style="background-color: #E4080A;"></div>
          <span class="legend-text">红茶</span>
        </div>
        <div class="legend-item" :class="{ 'active': activeImage === 2 }" @click="changeImage(2)">
          <div class="legend-color" style="background-color: #FFFFFF;"></div>
          <span class="legend-text">白茶</span>
        </div>
        <div class="legend-item" :class="{ 'active': activeImage === 3 }" @click="changeImage(3)">
          <div class="legend-color" style="background-color: #7DDA58;"></div>
          <span class="legend-text">绿茶</span>
        </div>
        <div class="legend-item" :class="{ 'active': activeImage === 4 }" @click="changeImage(4)">
          <div class="legend-color" style="background-color: #5DE2E7;"></div>
          <span class="legend-text">青茶</span>
        </div>
        <div class="legend-item" :class="{ 'active': activeImage === 5 }" @click="changeImage(5)">
          <div class="legend-color" style="background-color: #FFDE59;"></div>
          <span class="legend-text">黄茶</span>
        </div>
        <div class="legend-item" :class="{ 'active': activeImage === 6 }" @click="changeImage(6)">
          <div class="legend-color" style="background-color: #000;"></div>
          <span class="legend-text">黑茶</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 当前显示的图片索引
const activeImage = ref(1); // 默认显示第一张图片

// 切换图片的函数
const changeImage = (index) => {
  activeImage.value = index;
}
</script>

<style scoped>
/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

/* 图例样式 */
.legend-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  /* background: rgba(255, 255, 255, 0.05); */
}

.legend-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.legend-item.active {
  background: rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.legend-item.active .legend-text {
  color: #00FFFF;
  font-weight: bold;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.legend-text {
  color: #fff;
  font-size: 12px;
  flex: 1;
  transition: all 0.3s ease;
}
</style>